<template lang="html">
  <div class="rightTable">
    <el-table
      :data="tableDatas"
      max-height='100%'
      :row-style='style'
      :row-class-name='tableRowClassName'
      :header-cell-style='headerStyle'
      :cell-style= '{border:"none",padding : "2px 0"}'
      :highlight-current-row='false'
      style="width: 100%">

      <el-table-column
        prop="type"
        label="资源类型">
      </el-table-column>
      <el-table-column
        width = '120'
        label="昨日更新">
        <template slot-scope='scope'>
          <span id='hackcss'>{{formatNum(scope.row.value)}}</span>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  props : {
    tableDatas : {
      type : Array,
    }
  },
  data(){
    return {
      style : {
        color : '#46d6ff',
        textAlign : 'left',
        border : 'none'
      },
      headerStyle : {
        backgroundColor : '#004dd9',
        fontSize : '14px',
        color : '#fff',
        textAlign : 'center',
        border : 'none',
        padding : '0'
      },
    }
  },
  methods : {
    tableRowClassName({row, rowIndex}){
      if(rowIndex%2 === 0){
        return 'one';
      }else {
        return 'two';
      }
    },
    formatNum(n){
       var b=parseInt(n).toString();
       var len=b.length;
       if(len<=3){return b;}
       var r=len%3;
       return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
     },
  }
}
</script>

<style lang="scss">
  #hackcss {
    display: block;
    width: 100%;
    text-align: center;
  }
  tr.one {
     background : #183a8c !important;
   }
  tr.two {
     background : #0b37a1 !important;
   }
   .el-table--enable-row-hover .el-table__body tr:hover>td{
     background-color: rgba(0, 101, 221, 0.8) !important;
   }
   .el-table__body tr.current-row>td {
     background-color: rgba(16, 76, 147, 0.8) !important;
   }
  .rightTable {
    width: 100%;
    height: 100%;
  }
  .el-table::before {
    height: 0px!important;
  }
</style>
